<template>
  <!-- 主内容区 -->
  <div class="main-content">
    <h1 class="welcome-title">欢迎使用鉴正智能软件管理系统</h1>
    <p class="welcome-subtitle">高效、智能的文书管理平台，为您提供全方位的案件管理服务</p>

    <!-- 功能入口区 -->
    <div class="entry-container">
      <div class="entry-row">
        <div v-for="(item, index) in featureItems" :key="index" class="entry-item" @click="handleCardClick(item)">
          <el-icon class="entry-icon">
            <component :is="item.icon" />
          </el-icon>
          <div class="entry-title">{{ item.title }}</div>
          <div class="entry-desc">{{ item.description }}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="dialog-bar">
    <!-- 鉴定所日常管理模态框 -->
    <el-dialog v-model="showManagementModal" width="800px" :before-close="() => showManagementModal = false">
      <template #header="{ close, titleId, titleClass }">
        <div class="modal-header">
          <h2 class="modal-title">{{ currentModalTitle }}</h2>
        </div>

      </template>
      <div class="modal-content">
        <div class="modal-body">
          <div class="management-grid">
            <div v-for="(item, index) in currentModalItems" :key="index" class="management-item"
              @click="handleCardClick(item)">
              <el-icon class="management-icon">
                <component :is="item.icon" />
              </el-icon>
              <div class="management-title">{{ item.title }}</div>
              <div class="management-desc">{{ item.description }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>




</template>

<script setup lang="ts">
// 添加类型声明
declare module 'vue' {
  interface ComponentCustomProperties {
    $tab: {
      openPage: (path: string, title: string) => void
    }
  }
}

import { ref, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import {
  Document,
  ChatLineRound,
  MagicStick,
  Collection,
  OfficeBuilding,
  Message,
  Opportunity,
  UserFilled,
  Wallet,
  Setting,
  User,
  Tools,
  Box
} from '@element-plus/icons-vue'
import { ElDialog, ElButton } from 'element-plus'

interface FeatureItem {
  title: string
  description: string
  path?: string
  icon: any,
  children?: FeatureItem[]
}

const router = useRouter()
const { proxy } = getCurrentInstance()!

const showManagementModal = ref(false)
const currentModalItems = ref<FeatureItem[]>([])
const currentModalTitle = ref('鉴定所日常管理')




const featureItems = ref<FeatureItem[]>([
  {
    title: '新建委托',
    description: '创建新的委托案件',
    path: '/new-entrust',
    icon: Document
  },
  {
    title: '新委托案件库',
    description: '查看和管理新委托的案件信息',
    path: '/new-entrust-cases',
    icon: ChatLineRound
  },
  {
    title: '历史案件库',
    description: '查询和检索历史案件记录',
    path: '/history-cases',
    icon: Collection
  },
  {
    title: '鉴定所日常管理',
    description: '鉴定所日常运营管理和事务处理',
    icon: MagicStick,
    children: [
      {
        title: '人员管理',
        description: '鉴定所人员信息管理',
        path: '/staff-management',
        icon: User
      },
      {
        title: '设备管理',
        description: '仪器设备维护管理',
        path: '/device-management',
        icon: Tools
      },
      {
        title: '耗材管理',
        description: '实验耗材库存管理',
        path: '/supplies-management',
        icon: Box
      }
    ]
  },
  {
    title: '消息中心',
    description: '查看系统通知和待办事项',
    path: '/message-center',
    icon: MagicStick
  },
  {
    title: 'AI知识库',
    description: '查阅和管理AI知识库内容',
    path: '/ai-knowledge',
    icon: Opportunity
  },
  // {
  //   title: 'CRM模块',
  //   description: '客户关系管理，维护客户信息和沟通记录',
  //   path: '/crm',
  //   icon: MagicStick
  // },
  // {
  //   title: '财务管理',
  //   description: '财务数据统计、账单管理和收支分析',
  //   path: '/finance',
  //   icon: MagicStick
  // },
  {
    title: '系统管理',
    description: '管理系统设置、用户权限和基础配置',
    icon: MagicStick,
    children: [
      {
        title: '用户管理',
        description: '系统用户账号管理',
        path: '/home/user',
        icon: User
      },
      {
        title: '角色管理',
        description: '用户角色权限配置',
        path: '/home/role',
        icon: Setting
      },
      {
        title: '菜单管理',
        description: '系统菜单配置管理',
        path: '/home/menu',
        icon: Tools
      },
      {
        title: '部门管理',
        description: '系统菜单配置管理',
        path: '/menu-management',
        icon: Tools
      },
      {
        title: '职位管理',
        description: '系统菜单配置管理',
        path: '/menu-management',
        icon: Tools
      }
    ]
  }
])

const handleCardClick = (item: FeatureItem) => {
  if (item.children && item.children.length > 0) {
    currentModalItems.value = item.children
    currentModalTitle.value = item.title
    showManagementModal.value = true
  } else {
    proxy?.$tab.openPage(item.path, item.title)
  }
}
</script>

<style lang="scss" scoped>
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  height: 92px;
  padding: 25px 30px;


  .modal-title {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
  }
}



.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.welcome-title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #2c3e50;
  text-align: center;
}

.welcome-subtitle {
  font-size: 20px;
  color: #7f8c8d;
  margin-bottom: 60px;
  text-align: center;
}

.entry-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: center;
}

.entry-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1200px) {
  .entry-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .entry-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .entry-row {
    grid-template-columns: 1fr;
  }
}



.entry-item {
  width: 100%;
  height: 220px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  color: #333;
  position: relative;
  overflow: hidden;
}

.entry-item:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: #3498db;
  transform: translateY(-100%);
  transition: all 0.3s ease;
}

.entry-item:hover:before {
  transform: translateY(0);
}

.entry-item:hover {
  transform: translateY(-15px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.entry-icon {
  font-size: 60px;
  margin-bottom: 25px;
  color: #3498db;
  transition: all 0.3s ease;
}

.entry-item:hover .entry-icon {
  transform: scale(1.1);
}

.entry-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 12px;
}

.entry-desc {
  font-size: 14px;
  color: #7f8c8d;
  text-align: center;
  padding: 0 20px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .entry-item {
    width: 100%;
    max-width: 300px;
  }
}


.dialog-bar :deep(.el-dialog) {
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  padding: 0;
}


:deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  margin: 0;
  padding: 25px 30px;
  border-bottom: 1px solid #e0e0e0;
}

:deep(.el-dialog__title) {
  color: white;
  font-size: 24px;
  font-weight: bold;
}

:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: white;
  font-size: 24px;
}

:deep(.el-dialog__body) {
  padding: 40px 30px;
  background-color: #f8f9fa;
}

.management-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  padding: 20px;
}

.management-item {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 35px 25px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.management-item:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  transform: translateY(100%);
  transition: all 0.3s ease;
}

.management-item:hover:before {
  transform: translateY(0);
}

.management-item:hover {
  border-color: #667eea;
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.management-icon {
  font-size: 48px;
  margin-bottom: 15px;
  color: #667eea;
  position: relative;
  z-index: 1;
}

.management-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
  color: #2c3e50;
}

.management-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .management-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  :deep(.el-dialog) {
    width: 95%;
    margin: 10% auto;
  }

  :deep(.el-dialog__body) {
    padding: 30px 20px;
  }
}
</style>